<template>
	<div class="app-editor-container app-input-box">
		<a-input-number
			v-if="Object.is('number', type)"
			:value="curValue"
			:disabled="disabled"
			:readonly="readOnly"
			:max="max"
			:min="min"
			:size="size"
			:precision="precision"
			:formatter="numberFormat"
			@change="onChange"
			@click="onClick"
			@focus="onFocus"
			@blur="onBlur"
			:class="['app-input', 'app-input__number', `app-input-${name}`]"
			:placeholder="placeholder"
		/>
		<a-input-password
			v-else-if="Object.is('password', type)"
			:value="curValue"
			:disabled="disabled"
			:readonly="readOnly"
			:size="size"
			:visibilityToggle="visibilityToggle"
			@change="onChange"
			@pressEnter="onEnter"
			@click="onClick"
			@focus="onFocus"
			@blur="onBlur"
			:class="['app-input', 'app-input__password', `app-input-${name}`]"
			:placeholder="placeholder"
		/>
		<a-textarea
			v-else-if="Object.is('textarea', type)"
			:value="curValue"
			:disabled="disabled"
			:readonly="readOnly"
			:rows="rows ? rows : isTextArea10 ? 10 : rows"
			:size="size"
			:maxlength="maxLength"
			:showCount="showMaxLength"
			:autoSize="autosize"
			@change="onChange"
			@pressEnter="onEnter"
			@click="onClick"
			@focus="onFocus"
			@blur="onBlur"
			:class="['app-input', 'app-input__textarea', `app-input-${name}`]"
			:placeholder="
				showMaxLength && maxLength
					? `${$t('common.input.maxlength')}${maxLength}`
					: placeholder
			"
		/>
		<a-input
			allowClear
			v-else-if="Object.is('text', type)"
			:value="curValue"
			:disabled="disabled"
			:readonly="readOnly"
			:maxlength="maxLength"
			:size="size"
			:type="type"
			:showCount="showMaxLength"
			:addonAfter="afterLabel"
			:addonBefore="beforeLabel"
			@change="onChange"
			@pressEnter="onEnter"
			@click="onClick"
			@focus="onFocus"
			@blur="onBlur"
			:class="['app-input', 'app-input__input', `app-input-${name}`]"
			:placeholder="
				showMaxLength && maxLength
					? `${$t('common.input.maxlength')}${maxLength}`
					: placeholder
			"
		/>
		<div v-if="unit" class="unit-text">{{ unit }}</div>
	</div>
</template>
<script setup lang="ts">
import { IEvent, debounce, IParam } from '@/core';
import { inputProps } from './input';
import { getCurrentInstance, Ref } from 'vue';
import { format } from '@/core';
import { useEditorTypeParams } from '@/hooks/use-editor';

interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(inputProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
// 防抖本地缓存值
let cacheValue: Ref<string> = ref('');
let curValue: Ref<any> = computed(() => {
	return cacheValue.value;
});

const autosize = computed(() => {
    let autosize: IParam = {};
    if (props.maxRows) {
        autosize.maxRows = props.maxRows;
	}
	if (props.minRows) {
        autosize.minRows = props.minRows;
	}
    return Object.keys(autosize).length > 0 ? autosize : false;
})

/**
 * 监听值改变
 * @remember AppInput
 */
watch(
	() => props.value,
	(newVal: any) => {
		cacheValue.value = newVal;
	},
	{
		immediate: true,
	}
);

/**
 * 值改变
 * @param $event
 * @remember AppInput
 */
const onChange = ($event: any) => {
	let value;
	if (props.type == 'number') {
		value = $event;
	} else {
		value = $event.target.value;
	}
	cacheValue.value = value;
	const params = {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	};
	isDebounce(params);
};

/**
 * 防抖
 * @param params
 * @remember AppInput
 */
const isDebounce = (params: IEvent<string>) => {
	if (props.isDebounce) {
		debounce(emitFun, [params], getCurrentInstance(), 300);
	} else {
		emitFun(params);
	}
};

/**
 * 抛值
 * @param params
 * @remember AppInput
 */
const emitFun = (params: IEvent<string>) => {
	emit('component-action', params);
};

/**
 * 按下enter
 * @param $event
 * @remember AppInput
 */
const onEnter = ($event: any) => {
	if (!$event || $event.keyCode !== 13) {
		return;
	}
	const value = $event.target.value;
	const params = {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	};
	isDebounce(params);
};

/**
 * 数值框值格式化
 * @param $event
 * @remember AppInput
 */
const numberFormat = (value: any) => {
	if (!props.valueFormat) {
		return value;
	}
	if (!isNaN(parseFloat(value))) {
		return format.format(parseFloat(value), props.valueFormat);
	}
	return value;
};

/**
 * 点击
 * @param $event
 * @remember AppInput
 */
const onClick = ($event: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorClick',
		data: props.value,
	});
};

/**
 * 聚焦
 * @param $event
 * @remember AppInput
 */
const onFocus = ($event: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorFocus',
		data: props.value,
	});
};

/**
 * 失去焦点
 * @param $event
 * @remember AppInput
 */
const onBlur = ($event: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorBlur',
		data: props.value,
	});
};
</script>
